<template>
    <view class="u-no-network" v-if="!isConnected" :style="{'z-index': uZIndex}" @touchmove.stop.prevent="() => {}">
        <view class="u-inner">
            <image class="u-error-icon" :src="image" mode="widthFix"></image>
            <view class="u-tips">
                {{tips}}
            </view>
            <!-- 只有APP平台，才能跳转设置页，因为需要调用plus环境 -->
            <!-- #ifdef APP-PLUS -->
            <view class="u-to-setting">
                请检查网络，或前往<text class="u-setting-btn" @tap="openSettings">设置</text>
            </view>
            <!-- #endif -->
            <view class="u-retry" :hover-stay-time="150" @tap="retry" hover-class="u-retry-hover">
                重试
            </view>
        </view>
    </view>
</template>

<script>
    /**
     * noNetwork 无网络提示
     * @description 该组件无需任何配置，引入即可，内部自动处理所有功能和事件。
     * @tutorial https://www.uviewui.com/components/noNetwork.html
     * @property {String} tips 没有网络时的提示语（默认哎呀，网络信号丢失）
     * @property {String Number} zIndex 组件的z-index值（默认1080）
     * @property {String} image 无网络的图片提示，可用的src地址或base64图片
     * @event {Function} retry 用户点击页面的"重试"按钮时触发
     * @example <u-no-network></u-no-network>
     */
    export default {
        name: "u-no-network",
        props: {
            // 页面文字提示
            tips: {
                type: String,
                default: '哎呀，网络信号丢失'
            },
            // 一个z-index值，用于设置没有网络这个组件的层次，因为页面可能会有其他定位的元素层级过高，导致此组件被覆盖
            zIndex: {
                type: [Number, String],
                default: ''
            },
            // image 没有网络的图片提示
            image: {
                type: String,
                default: ""
            }
        },
        data() {
            return {
                isConnected: true, // 是否有网络连接
                networkType: "none", // 网络类型
            }
        },
        computed: {
            uZIndex() {
                return this.zIndex ? this.zIndex : this.$u.zIndex.noNetwork;
            }
        },
        mounted() {
            this.isIOS = (uni.getSystemInfoSync().platform === 'ios');
            uni.onNetworkStatusChange((res) => {
                this.isConnected = res.isConnected;
                this.networkType = res.networkType;
            });
            uni.getNetworkType({
                success: (res) => {
                    this.networkType = res.networkType;
                    if (res.networkType == 'none') {
                        this.isConnected = false;
                    } else {
                        this.isConnected = true;
                    }
                }
            });
        },
        methods: {
            retry() {
                // 重新检查网络
                uni.getNetworkType({
                    success: (res) => {
                        this.networkType = res.networkType;
                        if (res.networkType == 'none') {
                            uni.showToast({
                                title: '无网络连接',
                                icon: 'none',
                                position: 'top'
                            })
                            this.isConnected = false;
                        } else {
                            uni.showToast({
                                title: '网络已连接',
                                icon: 'none',
                                position: 'top'
                            })
                            this.isConnected = true;
                        }
                    }
                });
                this.$emit('retry');
            },
            async openSettings() {
                if (this.networkType == "none") {
                    this.openSystemSettings();
                    return;
                }
            },
            openAppSettings() {
                this.gotoAppSetting();
            },
            openSystemSettings() {
                // 以下方法来自5+范畴，如需深究，请自行查阅相关文档
                // https://ask.dcloud.net.cn/docs/
                if (this.isIOS) {
                    this.gotoiOSSetting();
                } else {
                    this.gotoAndroidSetting();
                }
            },
            network() {
                var result = null;
                var cellularData = plus.ios.newObject("CTCellularData");
                var state = cellularData.plusGetAttribute("restrictedState");
                if (state == 0) {
                    result = null;
                } else if (state == 2) {
                    result = 1;
                } else if (state == 1) {
                    result = 2;
                }
                plus.ios.deleteObject(cellularData);
                return result;
            },
            gotoAppSetting() {
                if (this.isIOS) {
                    var UIApplication = plus.ios.import("UIApplication");
                    var application2 = UIApplication.sharedApplication();
                    var NSURL2 = plus.ios.import("NSURL");
                    var setting2 = NSURL2.URLWithString("app-settings:");
                    application2.openURL(setting2);
                    plus.ios.deleteObject(setting2);
                    plus.ios.deleteObject(NSURL2);
                    plus.ios.deleteObject(application2);
                } else {
                    var Intent = plus.android.importClass("android.content.Intent");
                    var Settings = plus.android.importClass("android.provider.Settings");
                    var Uri = plus.android.importClass("android.net.Uri");
                    var mainActivity = plus.android.runtimeMainActivity();
                    var intent = new Intent();
                    intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
                    var uri = Uri.fromParts("package", mainActivity.getPackageName(), null);
                    intent.setData(uri);
                    mainActivity.startActivity(intent);
                }
            },
            gotoiOSSetting() {
                var UIApplication = plus.ios.import("UIApplication");
                var application2 = UIApplication.sharedApplication();
                var NSURL2 = plus.ios.import("NSURL");
                var setting2 = NSURL2.URLWithString("App-prefs:root=General");
                application2.openURL(setting2);
                plus.ios.deleteObject(setting2);
                plus.ios.deleteObject(NSURL2);
                plus.ios.deleteObject(application2);
            },
            gotoAndroidSetting() {
                var Intent = plus.android.importClass("android.content.Intent");
                var Settings = plus.android.importClass("android.provider.Settings");
                var mainActivity = plus.android.runtimeMainActivity();
                var intent = new Intent(Settings.ACTION_SETTINGS);
                mainActivity.startActivity(intent);
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "../../libs/css/style.components.scss";
    
    .u-no-network {
        background-color: #fff;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .u-inner {
        height: 100vh;
        @include vue-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: -15%;
    }

    .u-tips {
        color: $u-tips-color;
        font-size: 28rpx;
        padding: 30rpx 0;
    }

    .u-error-icon {
        width: 300rpx;
    }

    .u-to-setting {
        color: $u-light-color;
        font-size: 26rpx;
    }

    .u-setting-btn {
        font-size: 26rpx;
        color: $u-type-primary;
    }

    .u-retry {
        margin-top: 30rpx;
        border: 1px solid $u-tips-color;
        color: $u-tips-color;
        font-size: 28rpx;
        padding: 6rpx 30rpx;
        border-radius: 3px;
    }

    .u-retry-hover {
        color: #fff;
        background-color: $u-tips-color;
    }
</style>
